<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
<!--
 布局 :   把一个区域(页面/区块) 划分成几个部分的过程

    1. 多行
    2. 多列
    3. 行列混合
        1） 上
            左右
        2） 上
            左中右
            下
-->

<h1>1.多行布局</h1>
<hr>
<table border="1" width="960px" >
    <tr>
        <td height="20px">row-1</td>
    </tr>
    <tr>
        <td height="40px">row-2</td>
    </tr>
    <tr>
        <td>row-3</td>
    </tr>

</table>
<hr>
<h1>2.多列布局</h1>
<hr>
<!--
  单位 ：
    绝地单位
    相对单位
      % em
-->

<table border="1" width="960px">
      <tr>
          <td width="20%">col-1</td>
          <td width="50%">col-2</td>
          <td width="30%">col-3</td>
      </tr>

</table>
<hr>
<h1>
    3.行列混合:上-左右
</h1>
<!--
     先行后列
       合并
-->
<hr>
<table width="960px" border="1">
    <tr>
        <td colspan="2" height="120px">
            row-1
        </td>

    </tr>
    <tr>
        <td width="30%">
           left
        </td>
        <td width="70%">
            right
        </td>
    </tr>
</table>
</body>
</html>